<template>
	<up-overlay :show="visible" mode="center" borderRadius="24" :mask-close-able="maskClickAble" :zoom="false"
		@click="handleClickMask">
		<view class="mask-view">
			<view class="apply-refuse" :style="style">
				<view class="title" :style="'color:' + titleColor">{{ title }}</view>
				<view class="close-view" v-if="!maskClickAble" hover-class="u-hover-class"
					@click.stop="$u.throttle(handleClickClose, 500)">
					<u-icon name="close" class="close-icon" size="32" color="#666666"></u-icon>
				</view>
				<view class="content-view" :style="contentStyle">
					<view :class="['content-text-view', { hasInput: isInput }]" v-if="content">{{ content }}</view>
					<view v-if="$slots.content" class="slot-view">
						<slot name="content" />
					</view>
					<view class="content-input-view" v-if="isInput && visible">
						<view class="left-view">
							<u-input :type="inputType" style="width:100%" adjust-position v-model="text" :focus="focus"
								:disabled="!visible" @input="handleInput" placeholder-style="color: #cccccc" :custom-style="customStyle"
								:border="false" :placeholder="placeholder" :clearable="false" />
						</view>
						<view class="right-view" v-if="unit">
							<u-input style="width:100%" adjust-position v-model="unitText" placeholder-style="color: #cccccc"
								placeholder="请输入单位" :disabled="!visible" @input="handleInput" :custom-style="unitCustomStyle"
								:border="false" :clearable="false" @focus="handleFocus" @blur="handelBlur" />
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="cancel" hover-class="u-hover-class" @click.stop="$u.throttle(handleClickCancel, 500)"
						v-if="showCancel">
						{{ cancelText }}</view>
					<view class="confirm" hover-class="u-hover-class" @click.stop="$u.throttle(handleClickSure, 500)">
						<view v-if="buttonLoading" class="loading-view"><up-loading-icon mode="flower"></up-loading-icon></view>
						<view>{{ sureText }}</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
	</up-overlay>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '提示'
		},
		titleColor: {
			type: String,
			default: '#333333'
		},
		showCancel: {
			type: Boolean,
			default: true
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		sureText: {
			type: String,
			default: '确定'
		},
		input: {
			type: [Number, String],
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		unit: {
			type: String,
			default: ''
		},
		loading: {
			type: Boolean,
			default: false
		},
		noQuit: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: [Number, String],
			default: '20'
		},
		content: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'input'
		},
		check: {
			type: Boolean,
			default: true
		},
		inputType: {
			type: String,
			default: 'digit'
		},
		customStyle: {
			type: Object,
			default () {
				return {
					background: '#F6F7FA',
					borderRadius: '16rpx',
					width: '100%',
					padding: '0 24rpx'
				}
			}
		},
		unitCustomStyle: {
			type: Object,
			default () {
				return {
					background: 'transparent',
					width: '100%',
					padding: '0 24rpx',
					// 'text-align': 'right',
					color: '#999999'
				}
			}
		},
		// 是否可以通过点击遮罩进行关闭
		maskClickAble: {
			type: Boolean,
			default: true
		},
	},
	data () {
		return {
			buttonLoading: false,
			tempText: '',
			text: this.input || '',
			unitText: this.unit || '',
			marginBottom: 0,
			focus: false,
			listener: ()=>{}
		};
	},
	computed: {
		inputMaxlength () {
			return Number(this.maxlength);
		},
		unitMaxlength () {
			return 5
		},
		isInput () {
			return this.type == 'input';
		},
		style () {
			return this.isInput ? `margin-bottom:${this.marginBottom}px` : '';
		},
		contentStyle () {
			return this.$slots.content ? 'min-height:0' : ''
		}
	},
	watch: {
		loading (val) {
			this.buttonLoading = val
		},
		visible (val) {
			if (!val) {
				// this.input = '';
				this.text = '';
				this.focus = false;
				uni.offKeyboardHeightChange(this.listener)
			} else {
				console.log('-------watch -----');
				if (!this.isInput) return;
				this.text = this.input
				this.unitText = this.unit

				const { screenHeight } = uni.getSystemInfoSync()
				this.updatePosition(0)
				let keyboardHeight = 0
				const query = uni.createSelectorQuery().in(this)
				let nodesRef = query.select('.apply-refuse')
				nodesRef
				  .boundingClientRect((rect) => {
				    console.log('rect', rect)
						this.listener = (res) => {
				      console.log(res, keyboardHeight)
				      if (res.height === keyboardHeight) {
				        return
				      }
				      keyboardHeight = res.height

				      this.updatePosition(
				        keyboardHeight,
				        (screenHeight - rect.height) / 2
				      )
				    }
				    uni.onKeyboardHeightChange(this.listener)
				  })
				  .exec()
				this.$nextTick(() => {
					this.focus = true;
				});
			}
		}
	},
	created () {
		// console.log('-----', this.$slots);
	},
	destroyed () { },
	methods: {
		updatePosition (keyboardHeight, bottom) {
			console.log(keyboardHeight);
			if (keyboardHeight === 0) {
				this.marginBottom = 0;
			} else {
				this.marginBottom = Math.max(0, keyboardHeight - bottom) + 40;
			}
		},
		handleClickMask() {
			if (this.maskClickAble) {
				this.handleClickClose()
			}
		},
		changeVisibleValue (val) {
			this.$emit('update:visible', val);
		},
		handleClickCancel () {
			this.changeVisibleValue(false);
			this.$emit('cancel');
		},
		handleClickClose () {
			this.changeVisibleValue(false);
			this.$emit('close');
		},
		handleClickSure () {
			if (this.isInput && (!this.text && this.unit == this.unitText) && this.check) {
				this.$refs.uToast.show({
					title: this.placeholder,
					type: 'warning',
					duration: 1500
				});
				return;
			}
			if (this.noQuit) {
					this.buttonLoading = this.loading
			} else {
				this.changeVisibleValue(false);
			}
			this.$emit('click', this.text, this.unitText);
		},
		handleClose () {
			this.changeVisibleValue(false);
		},
		handleInput (event) {
			var text = event;
			if (event.length > this.inputMaxlength) {
				text = event.substring(0, this.inputMaxlength);
				this.$nextTick(() => {
					this.text = text;
				});
			}
			this.$emit('input', text, this.unitText);
		},
		handleInputUnit (event) {
			var unit = event;
			if (event.length > this.unitMaxlength) {
				unit = event.substring(0, this.unitMaxlength);
				this.$nextTick(() => {
					this.unitText = text;
				});
			}
			this.$emit('input', this.text, unit);
		},
		handleFocus () {
			this.tempText = this.unitText
			this.unitText = ''
		},
		handelBlur () {
			if (!this.unitText) {
				this.unitText = this.tempText
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.mask-view {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding-bottom: 44rpx;
}

.apply-refuse {
	background: linear-gradient(180deg, #f4fffc 0%, #ffffff 50%) #fff;
	width: 622rpx;
	border-radius: 12rpx;
	padding: 0 24rpx 32rpx;
	position: relative;

	.title {
		padding: 48rpx 0 40rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		position: relative;
	}

	.close-view {
		position: absolute;
		top: 0;
		right: 0;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.close-icon {
			font-size: weight;
		}
	}

	.content-view {
		min-height: 120rpx;
		position: relative;

		.slot-view {
			text-align: center;
			margin: 32rpx 24rpx;
			line-height: 48rpx;
		}

		.content-text-view {
			font-size: 32rpx;
			font-weight: bold;
			color: #191c27;
			margin-top: 30rpx;
			text-align: center;
			padding: 24rpx;

			&.hasInput {
				// font-weight: 400;
				// color: #666666;
				margin-top: 0rpx;
				padding: 0 0 24rpx 0;
				// font-size: 28rpx;
				// padding-top: 0;
				// text-align: left;
			}
		}

		.content-input-view {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-view {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
			}

			.right-view {
				display: flex;
				justify-content: flex-end;
				flex-shrink: 0;
				width: 240rpx;
				align-items: center;
			}
		}
	}

	.btn {
		margin-top: 68rpx;
		display: flex;
		font-size: 32rpx;
		justify-content: center;

		.cancel {
			height: 96rpx;
			flex: 1;
			font-weight: bold;
			border: 2rpx solid $default-color;
			border-radius: 16rpx;
			line-height: 96rpx;
			text-align: center;
			color: $default-color;
		}

		.confirm {
			height: 96rpx;
			flex: 0 0 50%;
			font-weight: bold;
			background: $default-color;
			border-radius: 16rpx;
			line-height: 96rpx;
			text-align: center;
			margin-left: 30rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;

			.loading-view {
				margin-right: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}</style>
